<template>
  <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete" @confirm="handleDelete" trigger="hover" class="ht-delete-button">
    <el-button
      slot="reference"
      v-if="!row"
      :type="type"
      :disabled="disabled"
      icon="icon-application-delete"
      v-loading.fullscreen.lock="fullscreenLoading"
    >
      <slot></slot>
    </el-button>
    <el-dropdown-item
      icon="el-icon-delete"
      :command="{row:row,command:'delete'}"
      slot="reference"
      v-if="row"
      :type="type"
      v-loading.fullscreen.lock="fullscreenLoading"
    >
      <slot></slot>
    </el-dropdown-item>
  </el-popconfirm>
</template>

<script>
import req from "@/request.js";
import { mapState } from 'vuex';

export default {
  name: "ht-delete-button",
  props: {
    type: {
      type: String,
      default: ""
    },
    requestMethod: {
      type: String,
      default: "DELETE"
    },
    url: {
      type: String,
      required: true
    },
    pk: {
      type: String,
      default: "id"
    },
    parameter: {
      type: String,
      default: "ids"
    },
    pureData: {
      type: Boolean,
      default: false
    },
    htTable: {
      type: Object
    },
    row: {
      type: Object
    },
    ignoreTenant: {
      type: Boolean,
      default: false
    },
    alertMessage: {
      type: Boolean,
      default: true
    },
    deleteList:{
      type:Array,
      default:()=>[]
    },
    disabled:{
      type:Boolean,
      default:false
    },
    isLayout:{
      type:Boolean,
      default:false
    },
    successMessage:{
      type:String
    }
  },
  data() {
    return {
      fullscreenLoading: false,
      elTable: null
    };
  },
  computed: {
    ...mapState('tenant',['tenantId']),
    ...mapState('login',['currentUser']),
  },
  mounted(){

  },
  methods: {
     handleDelete() {
      this.elTable = this.htTable;
      if (this.htTable.$refs && this.htTable.$refs.htTable) {
        this.elTable = this.htTable.$refs.htTable;
      }
      if (
        this.elTable &&
        this.elTable.selection &&
        this.elTable.selection.length == 0 &&
        !this.row
      ) {
        this.$message.error("请至少选择一条数据");
        return;
      }

      let ids = [];

      if (this.row) {
        ids.push(this.row[this.pk]);
      }else if(this.deleteList.length > 0){
        ids = this.deleteList.map(it=>it[this.pk])
      } else {
        for (let item of this.elTable.selection) {
          if (!this.ignoreTenant && !this.tenantId && item.tenantId && this.currentUser.userAttrs&&this.currentUser.userAttrs.tenantId != item.tenantId) {
            this.$message.error("不能删除平台的公共数据");
            return;
          }
          ids.push(item[this.pk]);
        }
      }
    const hasPublish =  this.elTable.selection.filter(item=>item.pubMenuCount)
      if(this.isLayout&&hasPublish&&hasPublish.length>0){
        this.$confirm(
          '该栏目已发布为菜单，删除后将无法使用菜单，是否删除该布局？',
          '提示',
          {
            type: 'warning'
          }
        )
          .then(() => {
            this.deleteSelectData(ids)
          })
          .catch(() => {})
      }else{
        this.deleteSelectData(ids)
      }

     
    },
   async deleteSelectData(ids){
       let params = {},
        data = null;
      params[this.parameter] = ids.join(",");
      // 如果是纯文本作为参数，则直接传递文本作为参数
      if (this.pureData) {
        params = null;
        data = ids.join(",");
      }

      this.fullscreenLoading = true;
      let response = await req
        .request({
          params: params,
          data: data,
          url: this.url,
          method: this.requestMethod
        })
        .finally(() => {
          this.fullscreenLoading = false;
          this.htTable.load();
        });

      if (response.data && response.data.state) {
        this.$emit("after-delete", response.data.message);
        if (this.alertMessage) {
          this.$message({
            message: this.successMessage||response.data.message || "操作成功",
            showClose: true,
            type: "success"
          });
        }
      }
    }
  }
};
</script>
